<template>
  <div class="bg">
    <!-- <div class="jihuo">
      <router-link to="/"><button class="btn_go"></button></router-link>
    </div> -->
    <div class="exit">
      <router-link to="/"><button class="btn_go"></button></router-link>
    </div>
    <div class="xinjian">
      <a :href="url + '/chengbao/menu/board/index.html'"><button class="btn_go"></button></a>
    </div>
    <div class="kecheng">
      <router-link to="/chengbao/"><button class="btn_go"></button></router-link>
    </div>
    <div class="play">
      <button class="btn_go"></button>
    </div>
    <div class="board">
      <router-link to="/chengbao/board"><button class="btn_go"></button></router-link>
    </div>
    <div class="keyboard">
      <router-link to="/chengbao/keyboard"><button class="btn_go"></button></router-link>
    </div>
    <div class="music" @click="goPath('musicplay')">
      <button class="btn_go"></button>
    </div>
  </div>
</template>

<script>
import STATICPATH from '../../config.js'
export default {
  name: 'index',
  data () {
    return {
      url: STATICPATH
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    goPath: function (namePath) {
      console.log('check')
      if (this.$store.state.active) {
        this.$router.push({name: namePath})
      } else {
        alert('授权失败')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../assets/bg3.png);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
.jihuo{
  position: absolute;
  background:url(../../assets/jihuo.png) no-repeat;
  background-size:100%;
  height:50px;
  width:100px;
  top:10px;
  right:250px;
}
.exit{
  position: absolute;
  background:url(../../assets/exit.png) no-repeat;
  background-size:100%;
  height:50px;
  width:100px;
  top:10px;
  right:130px;
}
.xinjian{
  position: absolute;
  height:450px;
  width:500px;
  left:240px;
  top:218px;
  background:url(../../assets/xinjian.png) no-repeat;
}
.kecheng{
  position: absolute;
  height:50px;
  width:140px;
  left:218px;
  top:660px;
  background:url(../../assets/menus/class1.png) no-repeat;
}
.play{
  position: absolute;
  height:50px;
  width:140px;
  left:395px;
  top:660px;
  background:url(../../assets/menus/play1.png) no-repeat;
}
.board{
  position: absolute;
  height:50px;
  width:140px;
  left:565px;
  top:660px;
  background:url(../../assets/menus/board2.png) no-repeat;
}
.keyboard{
  position: absolute;
  height:50px;
  width:140px;
  left:735px;
  top:660px;
  background:url(../../assets/menus/keyboard1.png) no-repeat;
}
.music{
  position: absolute;
  height:50px;
  width:140px;
  left:915px;
  top:660px;
  background:url(../../assets/menus/music1.png) no-repeat;
}
</style>
